<template>
  <el-dialog
    class="info-product-container"
    title="设置商品详情"
    :visible="infoDialogShow"
    width="60%"
    center
    top="0vh"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="btnClose"
  >
    <div class="center">
      <div class="components-container">
        <div class="editor-container">
          <!-- 富文本组件 -->
          <markdown-editor
            ref="markdownEditor"
            v-model="content"
            :options="{ hideModeSwitch: true, previewStyle: 'tab' }"
            height="350px"
          />
        </div>
      </div>
      <div v-html="html" />

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="btnOk">确 定</el-button>
        <el-button size="small" @click="btnClose">取 消</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
import MarkdownEditor from '@/components/MarkdownEditor'

export default {
  name: 'MarkdownDemo',
  components: { MarkdownEditor },
  props: {
    infoDialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      content: '',
      html: '',
      languageTypeList: {
        'en': 'en_US',
        'zh': 'zh_CN',
        'es': 'es_ES'
      }
    }
  },
  computed: {
    language() {
      return this.languageTypeList['en']
    }
  },
  methods: {
    getHtml() {
      this.html = this.$refs.markdownEditor.getHtml()
      console.log(this.html)
    },
    btnClose() {
      this.$emit('update:infoDialogShow', false)
    },
    btnOk() {
      this.btnClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.info-product-container {
    ::v-deep .el-dialog {
        height: 100vh;
    }

    .editor-container {
        margin-bottom: 30px;
    }

    .tag-title {
        margin-bottom: 5px;
    }

    .dialog-footer {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

}
</style>
